<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="checklogin.jsp"%>
<html>
<head>
	<base href="<%=basePath%>">

	<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<link rel="stylesheet" type="text/css" href="layui/dist/css/layui.css">
	<script type="application/javascript" src="js/jq.js"></script>
	<script type="application/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/simpleCart.min.js"> </script>
	<script type="application/javascript" src="layui/dist/layui.all.js"></script>
	<script src="js/orderr.js" type="text/javascript" charset="UTF-8"></script>

<style>
	.order ul{
		display: none;
	}

</style>
</head>

<body>
<!-- header -->
<!-- header -->
<div class="head-top"></div>

<!-- 导航栏-->

<%@include file="header.jsp"%>
<br>
<br>
<!-- header -->
<div class="order">
	<div class="container">

		<div style="display: none">
		<div name="showorder"  class="panel panel-default" >
			<div class="panel-heading" style="height: 55px;font-size:25px" >
				<span name="orderremark" style="color: #1A1A1A;font-size:20px;overflow:hidden;width: 300px"></span>
				<button name="orderbtn" type="button" class="btn btn-success" style="float: right">抢单</button>
			</div>

			<!-- List group -->
			<ul class="list-group">

			</ul>
		</div>
		</div>
</div>
</div>


<!-- footer-->
<%@include file="footer.jsp"%>

<%@include file="modal.jsp"%>
<!-- 模态框-->

</body>

<script>
	var layer,form,element  ;
	//初始化layui组件
	layer=layui.layer;
	form=layui.form;
	 element = layui.element;
	begin('<%=path%>');
	//初始化订单事件

		$.ajax({
			type: "GET",
			url: '<%=path%>/showorder',
			//发送请求
			dataType:'json',
			success: function (result) {
				//接收返回的json数据
				var show = $("div[name=showorder]");
				//获取name 为showorder的 模板对象
				for(var i=0;i<result.data.length;i++){
					var title=[]
					//初始化店铺名title数组
					var order=show.clone();
					//复制模板对象
					order.find("button").attr("orderid",result.data[i].order_id);
					//给模板中的按钮button添加orderid属性 便于点击抢单按钮的时候对应得上相对应的订单编号
					for (var j=0;j<result.data[i].menuorderrInfos.length;j++){
						//下面得循环就是遍历一个订单里面所有菜品的店铺名字，如果存在就略过不存在就加入数组
						//下面的for循环就是对于所有的店铺名去重
						if (title.indexOf(result.data[i].menuorderrInfos[j].shop_name)==-1){
							title.push(result.data[i].menuorderrInfos[j].shop_name)
						}
						var li=$(`<li class='list-group-item'> ${result.data[i].menuorderrInfos[j].shop_name}:${result.data[i].menuorderrInfos[j].dish_name}<span class="badge">${result.data[i].menuorderrInfos[j].num}件</span></li>`);
						console.log(order.find("ul"),li)
						li.appendTo(order.find("ul"))

					}
					var text='';
					//创建爱你text变量用来拼接去重完的字符数组
					for (let i = 0; i <title.length ; i++) {
						text+=title[i]+'  '
					}
					//直接通过text将订单编号，店铺名和地址填充到span上进行展示
					order.find("span[name=orderremark]").text("订单编号:"+result.data[i].order_id+'  店铺名:'+text+"    地址:"+result.data[i].room_number)
					//填充备注后插入ul里面
					$(`<li class='list-group-item'><strong>备注:</strong>${result.data[i].remark}</li>`).appendTo(order.find("ul"))
					//将整个填充好的模板插入到对应的div中
					order.appendTo($("div[class=order]>div"))
				}
			},
			error: function(data) {
			}
		});


	$(".order>div").on("click","div",function (event) {

		//给所有的订单div绑定点击事件
		//因为全局将ul进行了隐藏,所以通过slideToggl()来进行下拉显示再通过stop停止动画队列使得显示更加顺眼，多次点击的时候不会重复下拉隐藏
		$(this).find("ul").stop().slideToggle();

	})
	$(".order").on("click","button[name=orderbtn]",function (event) {
		//抢单后按钮会通过冒泡机制冒泡到父元素会触发ul的下拉事件这时候直接再让其直接隐藏，看起来不会那么怪
		//解决了抢单之后ul下拉问题
		event.stopPropagation();
		$(this).parent().parent().find("ul").hide();
		//复制this的对象下面的success回调函数会改变this的指向所以这里要备份为的是正确地操作点击的button元素
		var _this=$(this)
		$.ajax({
			type: "GET",
			url: '<%=path%>/getorder',
			//向这个地址发送请求
			data:{order_id:$(this).attr("orderid")},
			//携带订单编号
			dataType:'json',
			success: function (result) {
			//如果请求成功就弹出抢单成功
				layer.confirm('<b>确定要抢这个订单么？</b>', {
					btn: ['确认', '取消'] //可以无限个按钮

				},function () {
					layer.msg("抢单成功",{
						icon:1,
						time: 2000 //2秒关闭（如果不配置，默认是3秒）
					})
					//再通过button的父元素选取到对应的订单div再让他以滑动隐藏的方式慢慢地向上隐藏
					_this.parent().parent().slideUp(2000,function () {
						//隐藏完后调用回调函数直接将其移除
						_this.parent().parent().remove();
					});
				},function () {
					layer.msg("再接再厉",{
						icon:2,
						time: 2000 //2秒关闭（如果不配置，默认是3秒）
					})
				})

			},
			error: function(data) {
				//如果后台检测出buyid和当然登陆的账号的id一样则提示不能抢自己的单
				layer.msg("不能抢自己的单",{
					icon:2,
					time: 2000 //2秒关闭（如果不配置，默认是3秒）
				})
			}
		});

	})

	//点击购物车图片触发点击事件
	$("#buy").on("click",function () {
		//运行ordermenu初始化购物车函数
		ordermenu('<%=path%>')
		//给id=buybtn 的按钮触发点击事件开启模态框
		$("#buybtn").click();

	})




</script>

</html>
